<!DOCTYPE html>
<!--// 此处需使用 thymeleaf 模板的加载方式-->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>Title</title>
    <link th:href="@{/css/rest.css}" rel="stylesheet"/>
    <!--<link rel="stylesheet" href="../static/css/rest.css"/>-->
    <!--<script src="../static/js/jquery.min.js"></script>-->
    <script th:src="@{/js/jquery.min.js}"></script>
    <!--<script src="../static/js/laydate/laydate.js"></script>-->
    <script th:src="@{/js/laydate/laydate.js}"></script>
    <!--<script src="../static/js/echarts.common.min.js"></script>-->
    <script th:src="@{/js/echarts.common.min.js}"></script>
    <style>
        body {
            background: white;
        }

        .echarts {
            width: 100%;
            height: 300px;
        }
        #echarts {
            margin-bottom: 60px;
        }
        .layui-inline{
            width: 96%;
            color: red;
            height: 40px;
            margin-bottom: 20px;
        }
        .layui-inline input{
            margin-left: 10px;
            margin-top: 10px;
            width: 36%;
            height: 30px;
            border: 1px solid silver;
            float: left;
        }
        .layui-inline span{
            line-height: 46px;
            margin-left: 10px;
        }
        .btn-success{
            color: #fff;
            background-color: #5cb85c;
            border-color: #4cae4c;
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
    <input type="text" class="layui-input" id="test1" placeholder=" 开始时间"/>
    <input type="text" class="layui-input" id="test2" placeholder=" 结束时间"/>
    <span>
        <button type="button" class="btn-success">查询</button>
    </span>
</div>
<article id="echarts" class="echarts"></article>
<article id="echarts1" class="echarts"></article>
</body>
<script  th:inline="javascript">
    /*<![CDATA[*/
    var globalReqHost =/*[[${reqHost}]]*/ 'Sebastian';
    var globalDeviceName =/*[[${deviceName}]]*/ 'Sebastian';
    console.log(globalReqHost);
    var flag = false;
    var url = flag ? '/' : globalReqHost;
    //日期时间选择器
    laydate.render({
        elem: '#test1'
        ,type: 'datetime',
        max: 1
    });
    laydate.render({
        elem: '#test2'
        ,type: 'datetime',
        max: 1
    });
    /*根据时间查询*/
    $('.btn-success').on('click',function () {
        var test1 = $("#test1").val();
        var test2 = $("#test2").val();

        if(test1 && test2){
            wpajax(url + '/api/mpi/iot/waterPumpGroupAttr/readWpGroupRecordByNameAndTime'
                ,globalDeviceName,test1,test2);
        }else {
            alert('请选择开始时间和结束时间')
        }

    });
    /*水泵数据*/
    wpajax(url + '/api/mpi/iot/waterPumpGroupAttr/readWpGroupRecordByNameAndTime'
    ,globalDeviceName,'','');
    function wpajax(url,deviceName,startTime,endTime){
        $.ajax({
            url: url,
            type: 'post',
            dataType: 'json',
            data: {
                deviceName: deviceName,
                returnType: 2,
                startTime: startTime,
                endTime: endTime,
            },
            success: function (res) {
                var times = [];
                for(let i = 0;i < res.waterPumpGroupAttrList.reportTimeArr.length;i++){
                    times.push(res.waterPumpGroupAttrList.reportTimeArr[i].substring(11, res.waterPumpGroupAttrList.reportTimeArr.length))
                }
                option.xAxis.data = times;
                option1.xAxis.data = times;
                option.series[0].data = res.waterPumpGroupAttrList.pressureFeedbackArr;
                option.series[1].data = res.waterPumpGroupAttrList.settingPressureArr;
                option.series[2].data = res.waterPumpGroupAttrList.ultraTightlyAlarmArr;
                option.series[3].data = res.waterPumpGroupAttrList.SZGWYLArr;
                option1.series[0].data = res.waterPumpGroupAttrList.waterFrequencyArr;
                option1.series[1].data = res.waterPumpGroupAttrList.XXPLArr;
                myChart.setOption(option);
                myChart1.setOption(option1);
            }
        });
    }
    /*压力图*/
    var myChart = echarts.init(document.getElementById('echarts'));
    var option = {
        title: {
            text: '',
            subtext: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        dataZoom: {
            show: true,
            realtime: true,
            startValue: 0,
            endValue: 40
        },
        showDataShadow: 'false',
        legend: {
            data: ['出水压力', '额定压力', '超压报警', '进水压力']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            name: '单位(MPa)',
            type: 'value'
        },
        series: [
            {
                name: '出水压力',
                type: 'line',
                data: []
            },
            {
                name: '额定压力',
                type: 'line',
                data: []
            },
            {
                name: '超压报警',
                type: 'line',
                data: []
            },
            {
                name: '进水压力',
                type: 'line',
                data: []
            }
        ]
    };
    /*频率图*/
    var myChart1 = echarts.init(document.getElementById('echarts1'));
    var option1 = {
        title: {
            text: '',
            subtext: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        dataZoom: {
            show: true,
            realtime: true,
            startValue: 0,
            endValue: 40
        },
        showDataShadow: 'false',
        legend: {
            data: ['水泵频率', '下限频率']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            name: '单位(Hz)',
            type: 'value'
        },
        series: [
            {
                name: '水泵频率',
                type: 'line',
                data: []
            },
            {
                name: '下限频率',
                type: 'line',
                data: []
            }
        ]
    };
    /*]]>*/
</script>
</html>
